<template>
  <view class="login-guide-modal" v-if="visible" @click="handleMaskClick">
    <view class="modal-content" @click.stop>
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="handleClose">
        <image class="close-icon" src="/static/Images/common/close.png" mode="aspectFit"></image>
      </view>
      
      <!-- 图标和标题 -->
      <view class="header-section">
        <view class="icon-container">
          <image class="login-icon" src="/static/Images/user/login-guide.png" mode="aspectFit"></image>
        </view>
        <view class="title">{{ title || '登录后享受更多服务' }}</view>
        <view class="subtitle">{{ subtitle || '登录后可以查看消息、管理订单、享受更多个性化服务' }}</view>
      </view>
      
      <!-- 功能列表 -->
      <view class="features-section">
        <view class="feature-item" v-for="(feature, index) in features" :key="index">
          <view class="feature-icon">
            <image :src="feature.icon" mode="aspectFit"></image>
          </view>
          <text class="feature-text">{{ feature.text }}</text>
        </view>
      </view>
      
      <!-- 按钮区域 -->
      <view class="button-section">
        <view class="login-btn" @click="handleLogin">
          <!-- #ifdef MP-WEIXIN -->
          <text class="login-btn-text">微信授权登录</text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <text class="login-btn-text">立即登录</text>
          <!-- #endif -->
        </view>
        <view class="register-btn" @click="handleRegister" v-if="showRegisterBtn">
          <!-- #ifdef MP-WEIXIN -->
          <text class="register-btn-text">使用微信快速登录</text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <text class="register-btn-text">还没有账号？立即注册</text>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '登录后享受更多服务'
  },
  subtitle: {
    type: String,
    default: '登录后可以查看消息、管理订单、享受更多个性化服务'
  },
  features: {
    type: Array,
    default: () => [
      {
        icon: '/static/Images/login-guide/message.png',
        text: '查看消息通知'
      },
      {
        icon: '/static/Images/login-guide/order.png',
        text: '管理我的订单'
      },
      {
        icon: '/static/Images/login-guide/vip.png',
        text: '享受会员特权'
      }
    ]
  },
  maskClosable: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['close', 'login', 'register'])

// 计算属性：是否显示注册按钮（微信小程序环境下隐藏注册按钮）
const showRegisterBtn = computed(() => {
  // #ifdef MP-WEIXIN
  return false  // 微信小程序环境下不显示注册按钮
  // #endif
  // #ifndef MP-WEIXIN
  return true   // 其他平台显示注册按钮
  // #endif
})

// 处理关闭
const handleClose = () => {
  emit('close')
}

// 处理遮罩点击
const handleMaskClick = () => {
  if (props.maskClosable) {
    handleClose()
  }
}

// 处理登录
const handleLogin = () => {
  emit('login')
  handleClose()
}

// 处理注册
const handleRegister = () => {
  emit('register')
  handleClose()
}
</script>

<style scoped>
.login-guide-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40rpx;
}

.modal-content {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx 40rpx;
  width: 100%;
  max-width: 600rpx;
  position: relative;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 50%;
}

.close-icon {
  width: 24rpx;
  height: 24rpx;
}

.header-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.icon-container {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 30rpx;
  background: linear-gradient(135deg, #FF7B80 0%, #FF9A9E 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-icon {
  width: 60rpx;
  height: 60rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.subtitle {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
  padding: 0 20rpx;
}

.features-section {
  margin-bottom: 60rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.feature-icon image {
  width: 32rpx;
  height: 32rpx;
}

.feature-text {
  font-size: 30rpx;
  color: #333333;
  flex: 1;
}

.button-section {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.login-btn {
  background: linear-gradient(135deg, #FF7B80 0%, #FF9A9E 100%);
  border-radius: 48rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(255, 123, 128, 0.3);
}

.login-btn-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.register-btn {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #e0e0e0;
  border-radius: 40rpx;
  background-color: #ffffff;
}

.register-btn-text {
  font-size: 28rpx;
  color: #666666;
}

/* 动画效果 */
.login-guide-modal {
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>